<template>
<div class="desktop-icon">
    <div class="process-reminder" @click="toHistory">
        <el-card class="box-card">
            <span><i class="el-icon-warning"></i> 您当前有 <span class="color-y">4</span> 个流程需要处理</span>
        </el-card>
    </div>
    <el-row>
        <el-col :lg="4" class="icon-item" v-for="item in flowList" :key="item.index">
            <img :src="item.icon" @click="goToFlowForm(item.key,item.typeId)">
            <h4>{{item.resourceName}}</h4>
        </el-col>
        <!-- <el-col :lg="4" class="icon-item">
            <img src="/static/images/zzdnghwz.png" @click="flow('01')">
            <h4>新员工入网申请</h4>
        </el-col>
        <el-col :lg="4" class="icon-item">
            <img src="/static/images/zzgghdn.png" @click="flow('02')">
            <h4>在职人员更换电脑申请</h4>
        </el-col>
        <el-col :lg="4" class="icon-item">
            <img src="/static/images/lzryghdn.png" @click="flow('03')">
            <h4>在职人员更换位置申请</h4>
        </el-col>
        <el-col :lg="4" class="icon-item">
            <img src="/static/images/dnwhywlwx.png" @click="flow('04')">
            <h4>离职人员归还电脑申请</h4>
        </el-col>
        <el-col :lg="4" class="icon-item">
            <img src="/static/images/yyrjaz.png" @click="flow('05')">
            <h4>电脑及网络维修申请</h4>
        </el-col>
        <el-col :lg="4" class="icon-item">
            <img src="/static/images/bjbjptupjh.png" @click="flow('06')">
            <h4>笔记本及配套U盘出借申请</h4>
        </el-col>
        <el-col :lg="4" class="icon-item">
            <img src="/static/images/yyrjaz.png" @click="flow('07')">
            <h4>应用软件安装申请</h4>
        </el-col>
        <el-col :lg="4" class="icon-item">
            <img src="/static/images/yyqxgh.png" @click="flow('08')">
            <h4>应用系统权限变更申请</h4>
        </el-col>
        <el-col :lg="4" class="icon-item">
            <img src="/static/images/yyqxgh.png" @click="flow('09')">
            <h4>人员密级变更申请</h4>
        </el-col> -->
    </el-row>
</div>
</template>

<script>
import request from "@/utils/request";
export default {
  name: "Icon",
  data() {
    return {
      flowList: [
        {
          icon: "/static/images/xygrw.png",
          key: "",
          resourceName: ""
        }
      ]
    };
  },
  methods: {
     goToFlowForm(key,typeId) {
       if(typeId==undefined||typeId==null){
       this.$message.error("创建流程时未设置类型,请联系管理员");
       }else{
      this.$router.push({
        //  path: "/ProcessConsole/formCommon" + `?key=${key}`+`&formId=4`
        path: "/ProcessConsole/flow0"+typeId + `?key=${key}`
      });
       }
    },
    flow(key) {
      this.$router.push({
        path: `/ProcessConsole/flow` + `${key}`
      });
    },
    toHistory() {
      this.$router.push({
        path: "/ProcessConsole/history"
      });
    },
    getFlowList() {
      request({
        url: this.$api.queryDefinitionProcess,
        method: "get"
        // data: {id:this.$route.query.id},
      }).then(res => {
        if (res.code === "000000") {
          console.log(res);
          this.flowList = res.data;
          if (res.data !== undefined) {
            for (var i = 0; i < res.data.length; i++) {
             var typeId=res.data[i].typeId
              if(typeId=="1"){
                   this.flowList[i].icon = "/static/images/xygrw.png";
              }
              if(typeId=="2"){
                   this.flowList[i].icon = "/static/images/zzgghdn.png";
              }
              if(typeId=="3"){
                   this.flowList[i].icon = "/static/images/lzryghdn.png";
              }
              if(typeId=="4"){
                   this.flowList[i].icon = "/static/images/dnwhywlwx.png";
              }
              if(typeId=="5"){
                   this.flowList[i].icon = "/static/images/yyrjaz.png";
              }
              if(typeId=="6"){
                   this.flowList[i].icon = "/static/images/bjbjptupjh.png";
              }
              if(typeId=="7"){
                   this.flowList[i].icon = "/static/images/yyrjaz.png";
              }
              if(typeId=="8"){
                   this.flowList[i].icon = "/static/images/yyqxgh.png";
              }
               if(typeId=="9"){
                   this.flowList[i].icon = "/static/images/yyqxgh.png";
              }
            }
          }
        }
      });
    }
  },
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    document.body.className = "con-bg";
    next();
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    document.body.className = "";
    next();
  },
  mounted() {
     this.getFlowList();
  }
};
</script>

<style lang="less" scoped>
.desktop-icon {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  .process-reminder {
    cursor: pointer;
    margin: 130px auto 0;
    width: 400px;
    text-align: center;
    font-size: 1.5rem;
    .el-card {
      background: #365fb7;
      color: #fff;
      border: none;
      .color-y {
        color: #ffbe31;
        font-size: 1.5rem;
      }
      .el-icon-warning {
        margin-right: 10px;
      }
    }
    .el-card:hover {
      background: #365fb7;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.5);
    }
  }
  .el-row {
    max-width: 1400px;
    margin: 0 auto;
  }
  .icon-item {
    text-align: center;
    font-size: 16px;
    margin-top: 50px;
    margin-bottom: 50px;
    cursor: pointer;
    img {
      transition: ease-in-out 0.1s;
    }
    img:hover {
      transform: scale3d(1.1, 1.1, 1.1);
      transition: ease-in-out 0.1s;
    }
  }
}
</style>